<template>
    <div class="container">
        <div class="header">
            <NavBar title="修改订单" left-arrow color="#333333" @click-left="back" @click-right="backHome">
                <template #right>
                    <Icon name="wap-home-o" size="20" />
                </template>
            </NavBar>
        </div>
        <div class="main" v-if='info.id'>
             <Address :defaultId='info.destination.id' @addressChange='addressChange'></Address>
            <div class="baoguo" v-for='(item,idx) in list' :key='idx'>
                <div class="title flex align-items space-between">
                    <div class="left flex align-items flex-start">
                        <div class="cirle"></div>
                        <span>包裹{{ idx + 1}}</span>
                    </div>
                </div>
                <!--<div class="info-list flex align-items space-between">
                    <div class="left">选择包裹</div>
                    <div class="right flex1 flex align-items flex-end">
                        <span>顺丰888</span>
                        <i class="iconfont iconarrow-right"></i>
                    </div>
                </div>-->
                <div class="info-list flex align-items space-between" >
                    <div class="left">包裹备注</div>
                    <div class="right flex1 flex align-items flex-end">
                        <span>{{item.remarks}}</span>
                    </div>
                </div>
                <div class="info-list flex align-items space-between">
                    <div class="left">增值服务</div>
                    <div class="right flex1 flex align-items flex-end">
                        <span>价值{{ item.insured }}元，保费{{ item.insured_money }}元</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <Button type='info' block @click='submit'>确认修改</Button>
        </div>
    </div>
</template>

<script>
import {
    NavBar,
    Icon,
    Button,
    Dialog,
} from 'vant';
import Address from '@/components/Address/Address'
import { getOrderDtl , editOrder } from '@/model/api'
    export default {
        components:{NavBar,Icon,Address,Button},
        data(){
           return {
                id:"", //订单ID
                address:{},
                list: [],
                info:{},
           }
        } ,
        async created(){
            let { id } = this.$route.query;
            this.id = id;
            let { data , code } = await getOrderDtl({id});
            if(code == 1){
                this.info = data;
                this.list = data.goods;
            }
        },
        methods:{
            //选择地址变化事件
            addressChange(address){
                this.address = address;
            },
            async submit(){
                let { code , msg} = await editOrder({id:this.id,address_id:this.address.id});
                if(code == 1){
                   Dialog.alert({
                        message:msg,
                    }).then( () => {
                        this.$router.go(-1);
                    })
                }else{
                    this.$toast({
                        type:"fail",
                        message:msg,
                    })
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .baoguo {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 0 14px;
    margin-top: 5px;

    .title {
        width: 100%;
        padding: 15px;
        border-bottom: 1px solid #EEEEEE;

        .cirle {
            width: 6px;
            height: 6px;
            background: #5652FF;
            border-radius: 50%;
            margin-right: 5px;
        }

        span {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
        }

        .iconfont {
            color: #CCCCCC;
            font-size: 12px;
        }
    }

    .info-list {
        padding: 10px 0;

        .left {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
        }

        .right {
            overflow: hidden;

            span {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
                margin-right: 8px;
            }

            .iconfont {
                color: #CCCCCC;
                font-size: 12px;
            }
        }
    }
}
.footer{
    width:100%;
    height: auto;
    padding: 10px 14px;
    position: fixed;
    left:0;
    bottom: 0;
    background-color: #fff;
}
</style>